---
layout: pages
title: ShortCodes
permalink: /shortcodes/
---

                            <div class="head_title"><h2>Headings</h2></div>
                            <h1>Heading Typography H1</h1>
                            <h2>Heading Typography H2</h2>
                            <h3>Heading Typography H3</h3>
                            <h4>Heading Typography H4</h4>
                            <h5>Heading Typography H5</h5>
                            <h6>Heading Typography H6</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim eu lacus eget maximus. Nunc fermentum volutpat risus sed luctus. Vestibulum consectetur, tellus cursus euismod tempus, neque neque feugiat arcu, sed ornare odio justo sed nulla.</p>
                            <div class="head_title"><h2>Dropcaps</h2></div>
                            <p class="dropcap">Ronsectetur adipiscing elit. Etiam dignissim eu lacus eget maximus. Nunc fermentum volutpat risus sed luctus. Vestibulum consectetur, tellus cursus euismod tempus, neque neque feugiat arcu, sed ornare odio justo sed nulla. Etiam a vehicula enim. In mi massa, porta at placerat ut, tristique a neque. Ut cursus scelerisque volutpat. Suspendisse placerat nunc quis egestas tincidunt. Maecenas molestie, elit vestibulum pulvinar dapibus, ligula sapien accumsan lectus, a mattis magna ligula sit amet lectus. Duis aliquam dolor et porta bibendum. Phasellus efficitur ex ante, ac finibus felis ultricies quis. Praesent vulputate hendrerit risus.</p>
                            <div class="head_title"><h2>HTML Styles</h2></div>
                            <div class="row">
                                <div class="col col_6_of_12">
                                    <p>Lorem <code>and this is code</code> ipsum dosectetur adipisicing <sup>This is sup element</sup> elit, sed do. Lorem ipsum <sub>This is sub element</sub> dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href="#">tempor incididunt</a> ut labolore magna aliqua. Ut <del>This is del</del> enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do, consectetur adipisicing. Lorem <dfn>dfn element here</dfn> ipsum dosectetur adipisicing elit, <strong>strong text</strong> sed do. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur, <abbr title="The abbr tag styled like this">abbreviation</abbr> sed do.</p>
                                    <pre>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
                                </div>
                                <div class="col col_6_of_12">
                                    You can use the mark tag to <mark>highlight</mark> text.<br>
                                    And custom mark tag to <mark jQuery>highlight</mark> text.<br>
                                    <del>This line of text is meant to be treated as deleted text.</del><br>
                                    <s>This line of text is meant to be treated as no longer accurate.</s><br>
                                    <ins>This line of text is meant to be treated as an addition to the document.</ins><br>
                                    <small>This line of text is meant to be treated as fine print.</small><br>
                                    <strong>rendered as bold text</strong><br>
                                    <em>rendered as italicized text</em><br>
                                    For example, <code>&lt;section&gt;</code> should be wrapped as inline.<br>
                                    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
                                    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
                                </div>
                            </div>
                            <div class="head_title"><h2>Blockquotes</h2></div>
                            <blockquote>
                                <p><span>"</span>If you do what you love, you'll never work a day in your life. Phasellus eu sapien interdum ligula vulputate faucibus quis et lectus. Morbi a aliquet eros. Sed velit justo, volutpat nec mauris eu, consectetur faucibus metus.<span>"</span></p>
                                <footer>Marc Anthony, <a href="#">Twitter</a></footer>
                            </blockquote>
                            <div class="head_title"><h2>Lists</h2></div>
                            <div class="row">
                                <div class="col col_4_of_12">
                                    <!-- Unordered list -->
                                    <h5>Unordered list</h5>
                                    <ul>
                                        <li>Lorem ipsum dolor sit amet</li>
                                        <li>Adipiscing elit aenean mi non</li>
                                        <li>Enim consectetur dignissim vel</li>
                                        <li>Porttitor metus donec ligula</li>
                                    </ul>
                                    <!-- End Unordered list -->
                                </div>
                                <div class="col col_4_of_12">
                                    <!-- Ordered list -->
                                    <h5>Ordered list</h5>
                                    <ol>
                                        <li>Lorem ipsum dolor sit amet</li>
                                        <li>Adipiscing elit aenean mi non</li>
                                        <li>Enim consectetur dignissim vel</li>
                                        <li>Porttitor metus donec ligula</li>
                                    </ol>
                                    <!-- End Ordered list -->
                                </div>
                                <div class="col col_4_of_12">
                                    <!-- Custom list -->
                                    <h5>Custom list</h5>
                                    <ul class="fa-ul">
                                        <li><i class="fa-li fa fa-check-square"></i>Lorem ipsum dolor sit amet</li>
                                        <li><i class="fa-li fa fa-cog"></i>Adipiscing elit aenean mi non</li>
                                        <li><i class="fa-li fa fa-spinner fa-spin"></i>Enim consectetur dignissim vel</li>
                                        <li><i class="fa-li fa fa-home"></i>Porttitor metus donec ligula</li>
                                    </ul>
                                    <!-- End Custom list -->
                                </div>
                            </div>
                            <div class="head_title"><h2>Tables</h2></div>
                            <div class="row">
                                <div class="col col_6_of_12">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <th>2014</th>
                                                <th>Chrome</th>
                                                <th>Safari</th>
                                                <th>Opera</th>
                                            </tr>
                                            <tr>
                                                <td>November</td>
                                                <td>60.1 %</td>
                                                <td>3.7 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>October</td>
                                                <td>60.4 %</td>
                                                <td>3.9 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>September</td>
                                                <td>59.6 %</td>
                                                <td>3.6 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>August</td>
                                                <td>24.7 %</td>
                                                <td>3.7 %</td>
                                                <td>1.8 %</td>
                                            </tr>
                                            <tr>
                                                <td>July</td>
                                                <td>59.8 %</td>
                                                <td>3.5 %</td>
                                                <td>1.7 %</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col col_6_of_12">
                                    <table class="table_orange">
                                        <thead>
                                            <tr>
                                                <th>Firefox</th>
                                                <th>Safari</th>
                                                <th>Opera</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.7 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.9 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.0 %</td>
                                                <td>3.6 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.7 %</td>
                                                <td>3.7 %</td>
                                                <td>1.8 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.9 %</td>
                                                <td>3.5 %</td>
                                                <td>1.7 %</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_6_of_12">
                                    <table class="table_green">
                                        <thead>
                                            <tr>
                                                <th>Firefox</th>
                                                <th>Safari</th>
                                                <th>Opera</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.7 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.9 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.0 %</td>
                                                <td>3.6 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.7 %</td>
                                                <td>3.7 %</td>
                                                <td>1.8 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.9 %</td>
                                                <td>3.5 %</td>
                                                <td>1.7 %</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col col_6_of_12">
                                    <table class="table_black">
                                        <thead>
                                            <tr>
                                                <th>Firefox</th>
                                                <th>Safari</th>
                                                <th>Opera</th>
                                                <th>Opera</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.7 %</td>
                                                <td>3.7 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>23.4 %</td>
                                                <td>3.9 %</td>
                                                <td>3.9 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.0 %</td>
                                                <td>3.6 %</td>
                                                <td>3.6 %</td>
                                                <td>1.6 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.7 %</td>
                                                <td>24.7 %</td>
                                                <td>3.7 %</td>
                                                <td>1.8 %</td>
                                            </tr>
                                            <tr>
                                                <td>24.9 %</td>
                                                <td>3.5 %</td>
                                                <td>3.5 %</td>
                                                <td>1.7 %</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="head_title"><h2>Images</h2></div>
                            <figure class="wp-caption alignleft" jQuery>
                                <a href="/demo/150x150.png" class="popup_link"><img src="/demo/150x150.png" alt="Image"></a>
                                <figcaption class="wp-caption-text">Click on image!</figcaption>
                            </figure >
                            <p>Sed tristique arcu viverra, tincidunt nunc eget, bibendum neque. Mauris porttitor justo quis lacus maximus tempus. Curabitur viverra blandit lobortis. Donec eget tincidunt elit. Vivamus dapibus imperdiet augue porttitor luctus. Phasellus a ex sodales, cursus ante ut, fermentum lectus. Donec a feugiat est, et tincidunt nisi. In vitae efficitur nunc. Donec ante nulla, porta in viverra eleifend, placerat maximus orci. In congue libero vitae odio commodo, quis viverra nulla mollis. Donec ornare commodo quam, et fringilla ipsum mattis a. Proin lacinia metus vel neque hendrerit faucibus. Sed tristique arcu viverra, tincidunt nunc eget, bibendum neque. Mauris porttitor justo quis lacus maximus tempus. Curabitur viverra blandit lobortis. Donec eget tincidunt elit. Vivamus dapibus imperdiet augue porttitor luctus. Phasellus a ex sodales, cursus ante ut, fermentum lectus. Donec a feugiat est, et tincidunt nisi. In vitae efficitur nunc. Donec ante nulla, porta in viverra eleifend, placerat maximus orci. In congue libero vitae odio commodo, quis viverra nulla mollis. Donec ornare commodo quam, et fringilla ipsum mattis.</p>
                            <figure class="wp-caption alignright" jQuery>
                                <a href="/demo/150x150.png" class="popup_link"><img src="/demo/150x150.png" alt="Image"></a>
                                <figcaption class="wp-caption-text">Click on image!</figcaption>
                            </figure >
                            <p>In congue libero vitae odio commodo, quis viverra nulla mollis. Donec ornare commodo quam, et fringilla ipsum mattis a. Proin lacinia metus vel neque hendrerit faucibus. Sed tristique arcu viverra, tincidunt nunc eget, bibendum neque. Mauris porttitor justo quis lacus maximus tempus. Curabitur viverra blandit lobortis. Donec eget tincidunt elit. Vivamus dapibus imperdiet augue porttitor luctus. Phasellus a ex sodales, cursus ante ut, fermentum lectus. Donec a feugiat est, et tincidunt nisi. In vitae efficitur nunc. Donec ante nulla, porta in viverra eleifend, placerat maximus orci. In congue libero vitae odio commodo, quis viverra nulla mollis. Donec ornare commodo quam, et fringilla ipsum mattis a. Proin lacinia metus vel neque hendrerit faucibus. Sed tristique arcu viverra, tincidunt nunc eget, bibendum neque. Mauris porttitor justo quis lacus maximus tempus.</p>
                            <p>Curabitur viverra blandit lobortis. Donec eget tincidunt elit. Vivamus dapibus imperdiet augue porttitor luctus. Phasellus a ex sodales, cursus ante ut, fermentum lectus. Donec a feugiat est, et tincidunt nisi. In vitae efficitur nunc. Donec ante nulla, porta in viverra eleifend, placerat maximus orci. In congue libero vitae odio commodo, quis viverra nulla mollis. Donec ornare commodo quam, et fringilla ipsum mattis a. Proin lacinia metus vel neque hendrerit faucibus.</p>
                            <div class="head_title"><h2>Alerts</h2></div>
                            <div class="alert_message white" jQuery><p>White message goes here</p></div>
                            <div class="alert_message grey" jQuery><p>Grey message goes here</p></div>
                            <div class="alert_message red" jQuery><p>Red message goes here</p></div>
                            <div class="alert_message yellow" jQuery><p>Yellow message goes here</p></div>
                            <div class="alert_message green"><p>Green message goes here</p></div>
                            <div class="head_title"><h2>Buttons</h2></div>
                            <a href="#" class="btn btn_small">Small button</a>
                            <a href="#" class="btn btn_large">Large button</a>
                            <a class="btn btn_turquoise" href="#">Turquoise button</a>
                            <a class="btn btn_green" href="#">Green button</a>
                            <a class="btn btn_blue" href="#">Blue button</a>
                            <a class="btn btn_darkblue" href="#">Dark blue button</a>
                            <a class="btn btn_purple" href="#">Purple button</a>
                            <a class="btn btn_red" href="#">Red button</a>
                            <a class="btn btn_orange" href="#">Orange button</a>
                            <a class="btn btn_grey" href="#">Grey button</a><br>
                            <a class="btn btn_grey" href="#"><i class="fa fa-times"></i> Grey button</a>
                            <a class="btn btn_green btn_small" href="#"><i class="fa fa-life-ring"></i> Blue button</a>
                            <a class="btn btn_blue" href="#"><i class="fa fa-life-ring"></i> Blue button</a>
                            <a class="btn btn_red" href="#"><i class="fa fa-paper-plane"></i> Red button</a><br>
                            <a class="btn btn_turquoise btn_expand" href="#">Turquoise button (expand)</a>
                            <div class="head_title"><h2>Tabs</h2></div>
                            <div class="tab_content">
                                <ul class="clearfix">
                                    <li><h4><a href="#tabs_1">Nunc tincidunt</a></h4></li>
                                    <li><h4><a href="#tabs_2">Proin dolor</a></h4></li>
                                    <li><h4><a href="#tabs_3">Aenean lacinia</a></h4></li>
                                </ul>
                                <div id="tabs_1">
                                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                </div>
                                <div id="tabs_2">
                                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                </div>
                                <div id="tabs_3">
                                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                </div>
                            </div>
                            <div class="head_title"><h2>Accordions</h2></div>
                            <div class="accordion_content">
                                <h4 class="accordion_content_title">Section 1</h4>
                                <div class="accordion_content_inner">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar mi non enim consectetur dignissim vel porttitor metus. Donec sed faucibus ligula, vitae pharetra enim. Maecenas turpis metus, laoreet in.</p>
                                </div>
                            </div>
                            <div class="accordion_content">
                                <h4 class="accordion_content_title">Section 2</h4>
                                <div class="accordion_content_inner">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar mi non enim consectetur dignissim vel porttitor metus. Donec sed faucibus ligula, vitae pharetra enim. Maecenas turpis metus, laoreet in.</p>
                                </div>
                            </div>
                            <div class="accordion_content">
                                <h4 class="accordion_content_title">Section 3</h4>
                                <div class="accordion_content_inner">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar mi non enim consectetur dignissim vel porttitor metus. Donec sed faucibus ligula, vitae pharetra enim. Maecenas turpis metus, laoreet in.</p>
                                </div>
                            </div>
                            <div class="head_title"><h2>Columns</h2></div>
                            <div class="row">
                                <div class="col col_12_of_12">
                                    <p><strong>12/12</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Proin erat mi, laoreet sed tortor vel, ultricies rutrum dolor. Cras suscipit vulputate enim, sit amet maximus odio ultrices nec. Nullam venenatis augue non maximus porttitor. Fusce tempor lacinia hendrerit. Nulla facilisi. Vestibulum pharetra sed augue non consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_6_of_12">
                                    <p><strong>1/2</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Proin erat mi, laoreet sed tortor vel, ultricies rutrum dolor. Cras suscipit vulputate enim.</p>
                                </div>
                                <div class="col col_6_of_12">
                                    <p><strong>1/2</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Proin erat mi, laoreet sed tortor vel, ultricies rutrum dolor. Cras suscipit vulputate enim.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_4_of_12">
                                    <p><strong>1/3</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Cras suscipit vulputate.</p>
                                </div>
                                <div class="col col_4_of_12">
                                    <p><strong>1/3</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Cras suscipit vulputate.</p>
                                </div>
                                <div class="col col_4_of_12">
                                    <p><strong>1/3</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Cras suscipit vulputate.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_3_of_12">
                                    <p><strong>1/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras.</p>
                                </div>
                                <div class="col col_3_of_12">
                                    <p><strong>1/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras.</p>
                                </div>
                                <div class="col col_3_of_12">
                                    <p><strong>1/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras.</p>
                                </div>
                                <div class="col col_3_of_12">
                                    <p><strong>1/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                                <div class="col col_2_of_12">
                                    <p><strong>1/6</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta ligula.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_3_of_12">
                                    <p><strong>1/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras.</p>
                                </div>
                                <div class="col col_9_of_12">
                                    <p><strong>3/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Proin erat mi, laoreet sed tortor vel, ultricies rutrum dolor. Cras suscipit vulputate enim, sit amet maximus odio ultrices nec. Nullam venenatis augue non maximus porttitor. Fusce tempor lacinia hendrerit. Nulla facilisi.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col_4_of_12">
                                    <p><strong>1/3</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed cras. Fusce tempor lacinia hendrerit.</p>
                                </div>
                                <div class="col col_8_of_12">
                                    <p><strong>3/4</strong><br>Rhoncus gravida. Etiam sagittis dui vitae magna porta, posuere vehicula ligula varius. Vestibulum sed imperdiet neque. Proin erat mi, laoreet sed tortor vel, ultricies rutrum dolor. Cras suscipit vulputate enim, sit amet maximus odio ultrices nec. Nullam venenatis augue non maximus porttitor.</p>
                                </div>
                            </div><!-- End Columns -->
